<template>
  <div class="container">
    <div class="row">
      <div class="col-12" v-for="(item, index) in allGoods" :key="index">
        <div class="img-header-img">
          <p class="img_name"> {{ item.title }}</p>
          <!--<img src="/static/image/redwine1-2.jpg" width="100%" height="100%"/>-->
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="idt">
          <div class="idt-header">
            <h4 class="text-center info-title">酒庄介绍/INTRODUCTION</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="idt-content">
          <div class="col-12">
            <div class="idt-text" v-for="(item, index) in winerys" :key="index"
                 style="margin: 0 0.1em 0 0.1em;padding-top: 1em">
              <h4 class="text-center">{{ item.name }}</h4>
              <p style="margin-bottom: 10px">{{ item.introduction }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="img-header">
          <div class="idt">
            <div class="idt-header">
              <h4 class="text-center info-title">商品信息/INFORMTION</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-for="(item, index) in allGoods" :key="index">
      <div class="row">
        <div class="col-12">
          <div class="img-body">
            <div class="redwine-content" style="padding: 1em 1.5em 1em;">
              <h4>{{ item.title }}</h4>
              <span v-if="item.price_bf === true">零售价格：<span
                  style="font-size: 2em;color: red;">{{ item.price }}</span> 元<br/></span>
              <span
                  v-if="item.tags_bf === true">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：{{ item.tags }}<br/></span>
              <span v-if="item.years_bf === true">葡萄年份：{{ item.years}}<br/></span>
              <span>度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：{{ item.volume }}% VOL<br/></span>
              <span v-if="item.temperature_bf === true">适饮温度：{{ item.temperature }} ℃<br/></span>
              <span>规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：{{ item.specs }}<br/></span>
              <span v-if="item.suggest_bf === true">配菜建议：{{ item.suggest }}<br/></span>
              <div v-if="item.content_bf === true">
                <span>品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;评：</span>
                <span>{{ item.content }}</span>
                <br/>
              </div>
              <div v-if="item.award === true">
                <span>奖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项：<br/></span>
                <span>{{ item.awar_text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="item.image_bf === true">
        <div class="row justify-content-center">
          <div class="col-12">
            <div class="idt-header">
              <p class="text-center">{{ item.image_info }}</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="image_info" style="padding-top: 1em;padding-bottom: 1em;">
              <div class="row justify-content-center" v-viewer>
                <div class="col-5"><img :src="item.image1" class="img-thumbnail" alt="Cinque Terre">
                </div>
                <div class="col-5"><img :src="item.image2" class="img-thumbnail" alt="Cinque Terre">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRedWine, getwinery } from '../../api/api'

export default {
  name: 'redwine',
  data () {
    return {
      allGoods: null,
      winerys: null,
      idtId: null,
      ids: 1
    }
  },
  methods: {
    getOneRedWine () {
      getRedWine({
        id: this.$route.params.id
      }).then((response) => {
        this.allGoods = response.data
        this.idtId = response.data[0].idt
        this.ids = this.idtId
      })
    },
    getWinery () {
      getwinery({
        id: this.ids
      }).then((response) => {
        this.winerys = response.data
      })
    }
  },
  created () {
    this.getOneRedWine()
    this.getWinery()
  }
}
</script>

<style>
  .img-body, .idt-content, .image_info {
    background-color: black;
  }

  .idt-header {
    background-color: #ebcf77;
  }

  .idt-text, .idt-header p {
    margin-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 500;
    border-left: 15px solid #000;
    border-right: 15px solid #000;
  }

  .redwine-content, .idt-text {
    color: #e2c17c;
  }

  .img-header-img {
    background: url("/img/redwine/redwine1-3.png") no-repeat center center;
    background-size: 100%;
    height: calc(100vw / 1.6);
  }

  .info-title {
    margin: 0;
    padding: 5px 0 5px;
  }

  .img_name {
    margin: 0;
    padding-top: calc(100vw / 1.8 - 10px);
    padding-left: 15px;
    color: #ffffff;
  }
</style>
